<section id="propertyPortfolioVue">
	<div class="propertyPortfolioVue-title line-height-45 border-b font-wt font-16" style="margin: 0 20px 20px;">物业组合分析</div>
    <div class="clearfix">
        <!--物业面积构成图-->
        <div class="st-property-area-component relative box-out-shadow">
			<div class="sort-title color-999 font-16">物业面积构成</div>
            <div class="clearfix title">
                <div class="pull-left color-666 font-16"></div>
                <div class="pull-right relative">
                    <web-calendar type="primary" v-model="jsPacDate"  width="150" @change="selectMJ" left-right='right'></web-calendar>
                </div>
            </div>
            <div id="yt-chart-container" style="height: 324px"></div>
            <div class="js-yt-no-data hide row-column-center">暂无数据</div>
        </div>
        <!--物业面积分布图-->
        <div class="st-property-area-distribution relative box-out-shadow">
			<div class="sort-title color-999 font-16">物业面积分布</div>
            <div class="clearfix ptb-10 plr-12 dy-flex">
				<div class="pull-left relative address-tab-hover" style="width: 70px;">
					<div class="address-tab-span pull-left"></div>
					<span class="icon-spread pull-left line-height-34 pl-5"></span>
					<ul class="address-tab cursor">
					    <li class="group">集团</li>
					    <li class="district">大区</li>
					    <li class="city">公司</li>
					</ul>
				</div>
                <div class="pull-left clearfix dy-flex">
                    <div class="select-ul" id="address-st" style="width: 140px;">
                        <span class="select-name info"></span>
                        <i class="icon-Gm-prefix st-address-icon"></i>
                        <ul></ul>
                    </div>
                    
                </div>
				<div class="relative" style="margin-right: 0;margin-left: auto;">
				    <web-calendar type="primary" v-model="jsPadDate"  @change="selectGS" width="120" left-right='right'></web-calendar>
				</div>
            </div>
            <div id="organization-chart-container" style="height: 324px"></div>
            <!-- <div class="text-center color-666 font-16">物业面积分布</div> -->
            <div class="js-pro-no-data hide row-column-center">暂无数据</div>
        </div>
    </div>
    <!--待出租面积柱形图-->
    <div class="st-wait-rent relative box-out-shadow clearfix">
        <div class="sort-title color-999 font-16 mb-10">项目总面积排名</div>
        <!-- <div class="chart-unit">面积(m²)</div> -->
        <div id="wait-rent-chart"></div>
        <!-- <div class="xaxis-name" style="top:370px;">项目名</div> -->
        <div class="js-wait-rent-no-data hide row-column-center">暂无数据</div>
    </div>
</section>

<style type="text/css">
.box-out-shadow {
	box-shadow: 0 0 5px rgba(0,0,0,.3);
	border-radius: 4px;
}
.xaxis-name {    
    right: 0px;
}
.st-wait-rent {
	margin: 20px 20px;
}
.st-property-area-component {
	margin: 0 20px;
}
.st-property-area-component, .st-property-area-distribution {
    float: left;
    width: 480px;
	height: auto;
}
.sort-title {
	margin-left: 15px;
	position: relative;
	padding-left: 10px;
	margin-top: 10px;
}
.sort-title::before {
	content: '';
	position: absolute;
	left: 0;
	top: 4px;
	width: 5px;
	height: 12px;
	opacity: 1;
	background: #f0a158;
}
	.st-property-area-distribution ul>li.active {
	    background-color: #fff;
	    color: #5e67a5;
	}
	.st-property-area-distribution .address-tab>li {
		border: 0;
	}
	.address-tab {
		position: absolute;
		z-index: 9999999;
		left: 0;
		top: 100%;
		background-color: #fff;
		display: none;
	}
	.address-tab-hover {
		background-color: #ededed;
	}
	.address-tab-hover:hover .address-tab {
		display: block;
	}
	.address-tab-span {
		line-height: 34px;
		text-indent: 15px;
	}
	
	.highcharts-pie-series {
		margin-bottom: 10px;
	}
</style>

<script src="modules/report_ui/scripts/property_portfolio.js" charset="utf-8"></script>
